<template>
  <div class="review-container content">
    <div class="left">
      <div class="header_img">
        <img :src="reviewMsgList.avatar" alt="" />
      </div>
    </div>
    <div class="right">
      <div class="right_1">
        <div>{{ reviewMsgList.user_nickname }}</div>
        <div v-if="canDelete" class="delete" @click="gotoDelete(reviewMsgList.id)">
          <img src="../../../assets/images/jiantou.png" alt="">
        </div>
      </div>
        <div class="main"  ref="main">
              <div class="right_2" :class="{'rule':isAddEvent}">
        <!-- 但有次到学校加WF的密码，到校园大楼周囲可以用手机。在点开手机银行App時wF就仃了，说末加密不可用。是否指的这个加密呢？ -->
        {{ reviewMsgList.intro }}
      </div>

      <div class="right_3">
        <template v-if="img[0].length != 0">
          <img
            :src="item"
            v-for="(item, index) in img"
            :key="item"
            alt=""
            @click="imgPreview(index)"
          />
          <slot></slot>
        </template>
      </div>

        </div>
      <div class="right_4">
        <div class="right_4_left" v-if="date.day !== '00'">
          {{ date.day }}天前
        </div>
        <div class="right_4_left" v-else-if="date.hours !== '00'">
          {{ date.hours }}小时前
        </div>
        <div class="right_4_left" v-else-if="date.min !== '00'">
          {{ date.min }}分钟前
        </div>
        <div class="right_4_left" v-else-if="date.secends !== '00'">
          {{ date.secends }}秒前
        </div>
        <div class="right_4_left" v-else></div>
        <div class="right_4_right">
          <div>
            <img
              src="https://qnhyd.laigl.com/8a454c70d934bfeebb1748855b571d48.png"
              alt=""
              v-if="reviewMsgList.is_good == 1"
              @click="getGoodData"
            />
            <img
              src="https://qnhyd.laigl.com/9230b3e7c53b7c3c70cc8d4562ee2a5c.png"
              alt=""
              v-else-if="reviewMsgList.is_good == 0"
              @click="getGoodData"
            />
            <span>{{ reviewMsgList.good }}</span>
          </div>
          <div @click="goReview" v-if="reviewMsgList.comment!=undefined">
            <img
              src="https://qnhyd.laigl.com/8f6500f79a571c6a789d5ad789eee17b.png"
              alt=""
            />
            <span>{{ reviewMsgList.comment }}</span>
          </div>
        </div>
      </div>
    </div>
  </div> 

</template>

<script>
import { computed, onMounted, onUpdated, reactive, ref, watch } from "vue";
import { useRouter ,useRoute} from "vue-router";
import {useStore} from "vuex"
import { ImagePreview, Toast } from "vant";
import { request } from "/@/network/request.js";
export default {
  props: {
    reviewMsgList: {
      type: Object,
      default() {
        return {};
      },
    },
    isAddEvent: {
      type: Boolean,
      default() {
        return false;
      },
    },
    canDelete: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  setup(props) {
    const value = ref("");
    const isReview = ref(false)
    const router = useRouter();
    const route = useRoute();
    const store = useStore()
    const main = ref(null);
    const date = reactive({
      day: "00",
      hours: "00",
      min: "00",
      secends:"00"
    });
    const img = computed(() => {
      let str = props.reviewMsgList.img.replace(/https:/, "http:");
      return str.split(",");
    });
    const imgPreview = (index) => {
      if (props.isAddEvent) return;
      ImagePreview({
        images: img.value,
        startPosition: index, //图片预览起始位置索引 默认 0
        showIndex: true, //是否显示页码         默认 true
        showIndicators: true, //是否显示轮播指示器 默认 false
        loop: true, //是否开启循环播放  貌似循环播放是不起作用的。。。
        onClose: function (url) {
          //回调参数,官方文档解释的不是很清楚。。。
          //回调参数类型 url:{ index:Number(当前图片的索引值), url:当前图片的URL }
          var num = url.index,
            url_link = url.url;
          console.log(url);
        },
      });
    };
    const dateHandle = (dateTime) => {
      const targetSecend =
        (Date.now() - Date.parse(new Date(dateTime * 1000))) / 1000;
      date.day = Math.floor(targetSecend / 3600 / 24);
      if (date.day.toString().length === 1) date.day = "0" + date.day;
      date.hours = Math.floor((targetSecend - date.day * 24 * 3600) / 3600);
      if (date.hours.toString().length === 1) date.hours = "0" + date.hours;
      date.min = Math.floor(
        (targetSecend - date.day * 24 * 3600 - date.hours * 3600) / 60
      );
      if (date.min.toString().length === 1) date.min = "0" + date.min;
      date.secends = Math.floor(
        targetSecend - date.day * 24 * 3600 - date.hours * 3600 - date.min * 60
      );
    };
    const getGoodData = async () => {
      try {
        const res = await request({
          url: "v1.club/good",
          data: {
            club_id: props.reviewMsgList.id,
            user_id: sessionStorage.getItem("user_id"),
          },
        });
        if(res.code ==200){
          props.reviewMsgList.is_good = 1;
          props.reviewMsgList.good += 1;
        }
        Toast({
          message: res.msg,
        });
      } catch (error) {
        Toast("网络错误 请稍后再试");
      }
    };
    const sendMsg = async ()=>{
     const res = await  request({
        url:"v1.club/comment",
        data:{
            user_id:sessionStorage.getItem("user_id"),
            intro:value.value,
            club_id:props.reviewMsgList.id
        }
      })
      if(res.code==200){
        Toast(res.msg);
        value.value = ""
        isReview.value = false
        props.reviewMsgList.comment+=1
      }else{
        Toast(res.msg)
      }
    }
    const closeIpt = ()=>{
      if(value.value!==""){
        Toast("请先发表评论");
        return
      }else{
        isReview.value = false
      }
      
    }
    const goReview = ()=>{
    if(route.path == "/publishdetail"){
      store.commit("changeTrue")
    }else{
      router.push({
            name: "PublishDetail",
            query: {
              id: props.reviewMsgList.id,
            },
        });
      }
    }
    const gotoDelete = (id)=>{
      store.commit("changeDeleteTrue",id)
    }
    watch(
      props,
      (val) => {
        dateHandle(val.reviewMsgList.create_time);
      },
      {
        deep: true,
        immediate: true,
      }
    ),
    onMounted(() => {
        if (props.isAddEvent) {
          main.value.addEventListener("click", () => {
            router.push({
              name: "PublishDetail",
              query: {
                id: props.reviewMsgList.id,
              },
            });
          });
        }
      });
    return {
      img,
      main,
      imgPreview,
      date,
      getGoodData,
      value,
      sendMsg,
      isReview,
      closeIpt,
      goReview,
      gotoDelete
    };
  },
};
</script>

<style  scoped>
.review-container {
  display: flex;
  margin: 0 auto;
  margin-top: 6.667vw;
  width: 92.8vw;
  margin-bottom: 5.067vw;
}
.review-container .left {
  width: 10.667vw;
  height: 100%;
}
.review-container .left .header_img {
  width: 10.667vw;
  height: 10.667vw;
  background-color: red;
  border-radius: 50%;
}
.review-container .left .header_img img {
  width: 10.667vw;
  height: 10.667vw;
  vertical-align: middle;
  border-radius: 50%;
}
.review-container .right {
  margin-left: 2.667vw;
  flex: 1;
}
.review-container .right_1 {
  margin-top: 2.933vw;
  display: flex;
  justify-content: space-between;
}
.review-container .right_1 .delete{
  transform: rotateZ(90deg);
  width: 3.733vw;
  height: 3.733vw;
}
.review-container .right_1 .delete img{
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.review-container .right_2 {
  margin: 4vw 0;
  font-size: 3.467vw;
  color: #565656;
  line-height: 1.5em;
}
.review-container .rule{
 display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
}
.review-container .right_3 img {
  width: 25.333vw;
  height: 25.333vw;
  vertical-align: middle;
  border-radius: 5px;
  margin-right: 3px;
}
.review-container .right_4 {
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
}
.review-container .right_4 img {
  width: 4.8vw;
  height: 4.8vw;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 5px;
}
.review-container .right_4_right {
  width: 26.133vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.right_4_left {
  color: #979797;
  font-size: 3.2vw;
}
</style>